
<template>
  <div class="merchantsList">
    <div class="main">
      <div class="detail">
        <div class="detail_title">基本信息</div>
        <div class="detail_box">
          <div class="detail_box_one">商户名称：{{ data.shopName==''?'-':data.shopName }}</div>
          <div class="detail_box_one">联系电话：{{ data.phone==''?'-':data.phone }}</div>
          <div class="detail_box_one">
            所属行业：{{ data.shopTypeParentName==''?'-':data.shopTypeParentName }}
          </div>
          <div class="detail_box_one">
            所属详细分类：{{ data.shopTypeName==''?'-':data.shopTypeName }}
          </div>
          <div class="detail_box_one">入驻时间：{{ data.createTime==''?'-':data.createTime }}</div>
          <div class="detail_box_one">商户经营地址：{{ data.address==''?'-':data.address }}</div>
        </div>
      </div>
      <div class="detail">
        <div class="detail_title">证照信息</div>
        <div class="detail_box">
          <div class="detail_box_one">经营者名称：{{ data.merchantName==''?'-':data.merchantName }}</div>
          <div class="detail_box_one">
            统一社会信用代码/组织机构代码：{{ data.businessLicenseNumber==''?'-':data.businessLicenseNumber }}
          </div>
          <div class="detail_box_one" v-if="data.merchantType == 1">
            企业类型：企业
          </div>
          <div class="detail_box_one" v-if="data.merchantType == 2">
            企业类型：个人
          </div>
          <div class="detail_box_one">注册资金：{{ data.registeredFund==''?'-':data.registeredFund }}<span v-if="data.registeredFund!=''">万</span></div>
          <div class="detail_box_one">法人姓名：{{ data.name==''?'-':data.name }}</div>
          <div class="detail_box_one">
            注册地址：{{ data.registeredAddress==''?'-':data.registeredAddress }}
          </div>
          <div class="detail_box_one" v-if="data.type!=2">
            电子营业执照：<span class="business" @click="dialogVisible = true"
              >营业执照.jpg</span
            >
          </div>
        </div>
      </div>
      <div class="detail" v-if="data.type!=2">
        <div class="detail_title">存管比例设置</div>
        <div class="detail_box">
          <!-- <div class="detail_box_one">企业信用评级：{{ data.creditLevel }}</div> -->
          <!-- <div class="detail_box_one">企业信用分：{{ data.creditScore }}</div> -->
          <div class="detail_box_one">存管比例：{{ data.superviseRatio }}%</div>
          <!-- <div class="detail_box_one" style="width: 100%">
            存管释放规则：每张卡消耗卡充值金额的<span class="numcolor">{{
              data.initReleaseRatio
            }}</span
            >%释放一次，消耗达<span class="numcolor">{{
              data.maxReleaseRatio
            }}</span
            >%全部释放
          </div> -->
          <div class="detail_box_one" style="width: 100%">根据消费者每次消费释放一次，释放金额=消费金额*存管比例</div>
        </div>
      </div>
      <div class="detail" v-if="tableData.length>0">
        <div class="detail_title">
          司法风险<span class="tips_one">新增风险需通过表格导入</span>
        </div>
        <ex-table
          ref="table"
          :loading="loading"
          :table-column="tableColumn"
          :table-data="tableData"
          @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange"
        >
        </ex-table>
        <div class="tips">
          说明： 司法类型：1 法院公告 2 立案信息 3 被执行人；主体类型 1 公司 2
          个人；案件类型 1 被起诉 2起诉他人
        </div>
      </div>
      <div class="detail" v-if="tableDatatwo.length>0">
        <div class="detail_title">
          行政处罚风险<span class="tips_one">新增风险需通过表格导入</span>
        </div>
        <ex-table
          ref="table"
          :loading="loading"
          :table-column="tableColumn2"
          :table-data="tableDatatwo"
          @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange"
        >
        </ex-table>
      </div>
      <div class="detail" v-if="tableDatathree.length>0">
        <div class="detail_title">
          法人风险<span class="tips_one">新增风险需通过表格导入</span>
        </div>
        <ex-table
          ref="table"
          :loading="loading"
          :table-column="tableColumn3"
          :table-data="tableDatathree"
          @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange"
        >
        </ex-table>
        <div class="tips">
          说明 ： 法人风险类型（1银行征信 2 失信记录 3 限制消费）
        </div>
      </div>
      <div class="buttom_box">
        <el-button @click="back">返回</el-button>
        <el-button
          type="primary"
          style="margin-left: 60px"
          @click="getAudit(data)"
          >更新数据</el-button
        >
      </div>
    </div>
    <el-dialog title="营业执照" :visible.sync="dialogVisible" append-to-body>
      <div class="img_box">
        <img
          class="img_boximg"
          style="width: 100%"
          :src="data.businessLicenseImg"
          alt=""
        />
      </div>
    </el-dialog>
    <detail-dialog
      v-if="detailDialog"
      :id="id"
      :merchantId="merchantId"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
import { mapState } from "vuex";
// components
import DetailDialog from "./components/dataSynchronization/DetailDialog";
import DetailDialogtwo from "./components/dataSynchronization/DetailDialogtwo";
import ExportExcelButton from "@/components/ExportExcelButton/index";
// api
import { getList, govdetail } from "@/api/merchants";

// mixins
import handlePageMixin from "@/mixins/handlePageMixin";

export default {
  name: "dataSynchronization",
  components: {
    DetailDialog,
    ExportExcelButton,
    DetailDialogtwo,
  },
  mixins: [handlePageMixin],
  computed: {
    ...mapState({
      statusList: function (state) {
        return state.common["merchant_apply_status"]; // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      industryStatusType: function (state) {
        return state.common["industry_type"]; // 要取this的实例，只能用不同函数，不能用箭头函数
      },
    }),
    ExportParams() {
      const { id: ticketId } = this;
      const params = {
        ...this.pageOptions,
        ...this.filter,
      };
      return params;
    },
  },
  data() {
    return {
      value: [],
      loading: false,
      dialogVisible: false,
      queryList: [
        { id: "1", value: "商户编号" },
        { id: "2", value: "商户账号名称" },
        { id: "3", value: "店铺名称" },
        { id: "4", value: "关联资金账户" },
      ],
      type: [
        { id: 0, value: "全部", num: "" },
        { id: 3, value: "未同步", num: 0 },
        { id: 1, value: "已同步", num: 0 },
      ],
      tableColumn: [
        { prop: "judicialTypeDict", label: "司法类型" },
        { prop: "typeDict", label: "主体类型" },
        { prop: "caseTypeDict", label: "案件类型" },
        { prop: "date", label: "日期" },
        { prop: "caseNo", label: "案号" },
        { prop: "caseReason", label: "案由" },
        { prop: "caseIdentityOne", label: "案件身份(原告或者上诉人)" },
        { prop: "caseIdentityTwo", label: "案件身份(被告或者被上诉人)" },
        { prop: "announcementType", label: "公告类型" },
        { prop: "execute", label: "执行标的" },
        { prop: "court", label: "法院" },
      ],
      tableColumn2: [
        { prop: "date", label: "日期" },
        { prop: "documentNo", label: "决定文书号" },
        { prop: "punishCause", label: "处罚事由/违法行为类型" },
        { prop: "punishResult", label: "处罚结果" },
        { prop: "punishUnit", label: "处罚单位" },
      ],
      tableColumn3: [
        { prop: "typeDict", label: "法人风险类型" },
        { prop: "date", label: "日期" },
        { prop: "issueDate", label: "发布日期" },
        { prop: "detail", label: "详情" },
        { prop: "caseNo", label: "案号" },
        { prop: "name", label: "姓名" },
        { prop: "unit", label: "单位或申请人信息" },
      ],
      filter: {
        queryId: "",
        query: "",
        // industry: "",
        shopType: "",
        // status: "",
        // applyStatus: "",
        thirdMerchantNo: "",
      },
      img_url: this.$IMG_URL,
      tableData: [],
      tableDatatwo: [],
      tableDatathree: [],
      currentNavtab: 0,
      detailDialog: false,
      normal: "",
      blacklist: "",
      isShow: true,
      AccountList: [], //关联资金账户查询列表
      // industryStatusType: [],//行业字典
      typeLs: [],
      id: "",
      merchantId:"",
      data: {},
    };
  },

  created() {
    const { id } = this.$route.query;
    this.id = id;
    this.merchantId = this.$route.query.merchantId
    this.getDetail();
  },
  methods: {
    //返回
    back() {
      this.$router.go(-1);
    },
    getDetail() {
      var params = {
        id: this.id,
        merchantId: this.merchantId
      }
      govdetail(params).then((res) => {
        console.log("获取详情", res);
        const { result } = res;
        this.data = result;
        this.tableData = result.govMerchantJudicialRiskList;
        this.tableDatatwo = result.govMerchantAdministrativePenaltyList;
        this.tableDatathree = result.govMerchantLegalPersonRiskList
        console.log(this.data.tableData);
      });
    },
    //数据更新
    getAudit(e) {
      this.id = e.id;
      this.merchantId = e.merchantId
      this.detailDialog = true;
    },
    _handleSuccess() {
      this.getDetail();
      this.detailDialog = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./style/merchantsList";
.el-select .el-input {
  width: 130px;
}
.first_box {
  ::v-deep :nth-child(1).el-input__inner {
    width: 100px;
  }
  ::v-deep :nth-child(2).el-input__inner {
    width: 200px;
  }
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.top_detail {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}
.detail {
  margin-bottom: 20px;
}
.detail_title {
  color: #000;
  font-size: 16px;
  border-left: 4px solid #1890ff;
  padding-left: 10px;
  margin-bottom: 20px;
}
.detail_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0px 26px 0;
}
.detail_box_one {
  width: 50%;
  font-size: 15px;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.numcolor {
  color: #ff600b;
}
.tips_one {
  color: #fa2020;
  font-size: 12px;
  margin-left: 20px;
}
.tips {
  font-size: 13px;
  color: #333;
  margin: 20px 0 40px;
}
.buttom_box {
  width: 100%;
  display: flex;
  justify-content: center;
}
.business {
  color: #1890ff;
  cursor: pointer;
  margin-right: 10px;
}
.business:hover {
  opacity: 0.8;
}
.img_box {
  width: 80%;
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
}
</style>